<template>
	<div class="v-view">
<!--		<Breadcrumb moduleName="个人中心">-->
<!--			<Shortcuts slot="content"></Shortcuts>-->
<!--		</Breadcrumb>-->
		<div class="content-wrap">
			<div class="content-left">
				<div class="user">
					<div class="avatar">
						<a-avatar :size="52" style="color: #fff; backgroundColor: #2085EF;font-size: 17px">
							<span style="font-size: 25px">A</span>
						</a-avatar>
					</div>
					<div class="mailbox">{{userListNew.email}}</div>

					<div class="account-set">
						<a-icon type="user" class="account-set-icon"/>
						<span class="account-set-text">账号设置</span>
					</div>
					<div>
					</div>
				</div>
			</div>
			<div class="content-right">
				<span class="account-head">账号信息</span>
				<div class="inform">
					<div class="informlist listone" >
						<div>账号</div>
						<span>{{userListNew.email}}</span>
						<div class="modify"><!--修改--></div>

					</div>

					<div class="informlist listone">
						<div>姓名</div>
						<span>{{userListNew.name}}</span>

						<button class="right-button"  @click="() => (modifyname = true)">修改</button>
					</div>

					<div class="informlist listone">
						<div style="font-size: 16px">手机号</div>
						<span>{{userListNew.mobile}}</span>
<!--						<a-form-model ref="mobileRules" :model="userListNew" :rules="mobileRules">-->
<!--							<a-form-model-item has-feedback prop="mobile">-->
<!--								<a-input :disabled="userPhone" v-model="userListNew.mobile"/>-->
<!--							</a-form-model-item>-->
<!--						</a-form-model>-->
						<button class="right-button" @click="() => (modifyphone = true)">修改</button>
<!--						<div v-show="editPhoneShow" class="modify" @click="editPhone">修改</div>-->
<!--						<div v-show="!editPhoneShow" class="modify" @click="affirmPhone">确认修改</div>-->
					</div>

					<div class="informlist listone">
						<div>邮箱</div>
						<span>{{userListNew.email}}</span>
						<button class="right-button" @click="() => (modifychange = true)">修改</button>
<!--						<div class="modify"  @click="() => (modifychange = true)">修改</div>-->
						<!--<div class="modify" v-if="modifychange" @click="() => (modifychange = false)">确定</div>-->
					</div>

					<div class="informlist listone">
						<div>密码</div>
						<span>****</span>
						<button class="right-button" @click="() => (modifyword = true)">修改</button>
					</div>
				</div>
			</div>

			<div id="components-modal-demo-position2">
				<a-modal v-model="modifyword" title="修改密码" centered @ok="() => confirm()" @cancel="passModalC" >
					<template>
						<a-form :form="form" refs="formS">
							<a-form-model-item label="原密码" v-bind="formItemLayout" style="display: flex">
								<a-input
									placeholder="请输入原密码"
									v-decorator="['originalPassword',
											{rules: [{required: true,message: '请输入原密码！'},
											/*{validator: originalToNextPassword}*/]
											}
										]"
									type="password"
								/>
							</a-form-model-item>
							<a-form-item v-bind="formItemLayout" label="新密码" has-feedback style="display: flex">
								<a-input
									placeholder="请输入6-20位密码(字母、数字和符号的组合)"
									v-decorator="['password',
											{rules: [{required: true,message: '请输入新密码！'},
											{validator: validateToNextPassword},
											{validator: regExpPassword}]
											}
										]"
									type="password"
								/>
							</a-form-item>
							<a-form-item v-bind="formItemLayout" label="确认密码" has-feedback style="display: flex">
								<a-input
									placeholder="请输入6-20位密码(字母、数字和符号的组合)"
									v-decorator="['confirm',
										{rules: [{required: true,message: '两次输入密码不一致，请重新确认！'},
										{validator: compareToFirstPassword},
										{validator: regExpPassword}]
										}
									]"
									type="password"
									@blur="handleConfirmBlur"
								/>
							</a-form-item>
						</a-form>
					</template>
				</a-modal>
			</div>

			<div id="components-modal-demo-position1">
				<a-modal :visible="modifychange" title="修改邮箱" centered
								 @ok="() => editEmail(false)"
								 @cancel="() => (modifychange = false)">
					<template>
						<a-form-model ref="emailRules" :model="userListNew" :rules="emailRules">
							<a-form-model-item has-feedback prop="email">
								<a-input v-model="emailPost" placeholder="请输入邮箱" />
<!--								<a-input :value="userListNew.email" placeholder="请输入邮箱" />-->
							</a-form-model-item>
						</a-form-model>
					</template>
				</a-modal>
			</div>

			<div>
				<a-modal :visible="modifyname" title="修改姓名" centered
								 @ok="() => affirmUserNa(false)"
								 @cancel="() => (modifyname = false)">
					<template>
						<a-form-model ref="nameRules" :model="userListNew" :rules="nameRules">
							<a-form-model-item has-feedback prop="name">
								<a-input v-model="namePost"/>
							</a-form-model-item>
						</a-form-model>
					</template>
				</a-modal>
			</div>

			<div>
				<a-modal :visible="modifyphone" title="修改手机号" centered
								 @ok="() => affirmPhone(false)"
								 @cancel="() => (modifyphone = false)">
					<template>
						<a-form-model ref="mobileRules" :model="userListNew" :rules="mobileRules">
							<a-form-model-item has-feedback prop="mobile">
								<a-input v-model="phonePost"/>
							</a-form-model-item>
						</a-form-model>
					</template>
				</a-modal>
			</div>

		</div>
	</div>
</template>

<script lang='ts'>
	import { Component, Vue  } from 'vue-property-decorator'
	import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'
	import Shortcuts from '@/layout/components/Breadcrumb/Shortcuts.vue'
	import { getAccountMation,editAccountPassword,updateAccountMation } from '@/api/user'

	@Component<any>({
		components: {
			Breadcrumb,
			Shortcuts
		}
	})

	export default class Profile extends Vue {
		public	ExhibitionPassword = "**********"
		public confirmDirty = false
		public autoCompleteResult = []
		public userListNew:any = {}
		public userList:any = {}
		public	userNameDis = true
		public editNameShow = true
		public userPhone = true
		public editPhoneShow = true
		public formItemLayout = {
			labelCol: {
				xs: { span: 4 },
				sm: { span: 4 }
			},
			wrapperCol: {
				xs: { span: 20 },
				sm: { span: 20 }
			}
		}
		public	list = {
			email: "",
			code: ""
		}
		public count: any = 0
		public	show: any = true
		public timer: any
		public modifyname =false
		public modifyphone = false
		public modifychange = false
		public modifyword = false
		public labelCol = { span: 4 }
		public wrapperCol = { span: 14 }
		public form:any = {}
		public formFhone: any = {}

		public namePost:any =""
		public phonePost:any =""
		public emailPost :any = ""
		public	myMobileRules = (rule:any, value:any, callback:any) => {
			let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/)
			let result = reg.test(value)
			if (!result) {
				callback('请您输入正确的手机号)')
			} else {
				callback()
			}
		};
		private myEmailRules = (rule:any, value:any, callback:any) => {
			let reg = new RegExp(/^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/)
			let result = reg.test(value)
			if (!result) {
				callback('请您输入正确的邮箱号)')
			} else {
				callback()
			}
		};
		private	 nameRules = {
			name: [{ required: true, message: '请输入新的姓名', trigger: 'blur' }],
		}
		private	 mobileRules = {
			mobile: [
				{ required: true, message: '请输入新的手机号', trigger: 'blur' },
				{ validator: this.myMobileRules, trigger: 'blur' }],
		}
		private emailRules = {
			email: [
				{ required: true, message: '请输入新的邮箱', trigger: 'blur' },
				{ validator: this.myEmailRules, trigger: 'blur' }],
		}


		mounted() {
			this.form = this.$form.createForm(this, { name: 'register' })
			this.formFhone = this.$form.createForm(this, { name: 'phone' })
			this.getAccountMation()
		}

		//获取用户信息
		getAccountMation() {
			getAccountMation().then(res => {
				if(res.code == 200 ){
					this.userList = res.data
					this.userListNew = JSON.parse(JSON.stringify(res.data))
					this.emailPost = this.userListNew.email
					this.namePost = this.userListNew.name
					this.phonePost = this.userListNew.mobile
				}else {
					console.log("error",res)
				}
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		//修改账户密码
		editAccountPassword() {
			let params = 	{
				newPassword: this.form.getFieldValue('password') || "",
				oldPassword: this.form.getFieldValue( "originalPassword") || ""
			}
			editAccountPassword(params).then(res => {
				if(res.code == 200 ){
					this.getAccountMation()
					this.form.resetFields(["originalPassword","password","confirm"])
				}else {
					console.log("error",res)
					this.form.resetFields(["originalPassword","password","confirm"])
				}
				this.form.resetFields(["originalPassword","password","confirm"])
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		//更新用户信息
		updateAccountMation() {
			this.userListNew.email = this.emailPost
			this.userListNew.name = this.namePost
			this.userListNew.mobile = this.phonePost
			updateAccountMation(this.userListNew).then(res => {
				if(res.code == 200 ){
					this.$message.success("修改成功")
					this.getAccountMation()
					this.userNameDis = true
					this.editNameShow =true
					this.userPhone = true
					this.editPhoneShow =true
					this.modifychange = false
					this.modifyname =false
					this.modifyphone =false
				}else {
					console.log("error",res)
				}
			}).catch((err: any) => {
				this.$message.error(err.msg || err.message, 5)
			})
		}

		affirmUserNa(type:boolean){
			const fomObj:any = this.$refs.nameRules
			fomObj.validate((valid:any) => {
				if (valid) {
					this.updateAccountMation()
				} else {
					return false
				}
			})
			this.modifyname = type
		}

		//修改手机号
		editPhone(){
			this.userPhone = false
			this.editPhoneShow =false
		}
		affirmPhone(){
			const fomObj:any = this.$refs.mobileRules
			fomObj.validate((valid:any) => {
				if (valid) {
					this.updateAccountMation()
				} else {
					return false
				}
			})
			this.modifyphone = false
		}

		//修改邮箱
		editEmail(){
			const fomObj:any = this.$refs.emailRules
			fomObj.validate((valid:any) => {
				if (valid) {
					this.updateAccountMation()
				} else {
					return false
				}
			})
		}

		handleConfirmBlur(e: any): void {
			console.log(e)
		}

		validateToNextPassword(rule: any, value: any, callback: any): void {
			// const form: any = this.form
			if (value && this.confirmDirty) {
				this.form.validateFields(['confirm'], { force: true })
			}
			callback()
		}
		regExpPassword(rule: any, value: any, callback: any): void {
			//检测密码由6-20字母和数字组成
			let reg = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/)
			let result = reg.test(value)
			if (!result) {
				callback('请您输入6-20位，至少带字母数字符号的密码！')
			} else {
				callback()
			}
		}
		compareToFirstPassword(rule: any, value: any, callback: any): void {
			const form: any = this.form
			if (value && value !== form.getFieldValue('password')) {
				callback('两次输入密码不一致，请重新确认！')
			} else {
				callback()
			}
		}

		//确认按钮事件-原始密码、新密码、确认新密码验证通过
		confirm(){
			this.form.validateFields((err:any) => { //表单验证
				if (!err) {
					this.editAccountPassword()
					this.modifyword = false
				}
			})
		}

		//密码弹窗关闭事件
		passModalC(){
			this.form.resetFields(["originalPassword","password","confirm"])
		}

		/*getCode() {
			//没有输入邮箱的时候，无法发送验证码
			if(this.list.email != ""){
				//计时器
				if (!this.timer) {
					this.count = 60
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= 60) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			}else {
				this.$message.warning('请输入邮箱，才能发送验证码。')
			}
		}*/

	}
</script>

<style lang='scss' scoped>
	.v-view {
		overflow-y: auto;
		width: 100%;
		height: 100%;
		position: relative;

		.account-set{
			margin-top: 62px;
			margin-left: 16px;
			width: 240px;
			height: 40px;
			background: rgba(45,140,240,0.06);
			border-radius: 2px;
			.account-set-icon{
				margin-left: 26px;
				margin-top: 20px;
				transform: translate(-50%,-50%);
				color: #2085EF;
			}
			.account-set-text{
				line-height: 40px;
				display: inline-block;
				height: 40px;
				position: absolute;
				margin-left: 5px;
				color: #2085EF;
			}
		}
		.content-wrap {
			min-height: 100%;
			// padding: 15px;
			// padding-left: 0;
			box-sizing: border-box;
			display: flex;

			.content-left {
				min-height: 100%;
				// height: 820px;
				width: 272px;
				background: #ffffff;
				// border-radius: 4px;
				// box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				position: relative;
				// margin-right: 15px;

				.user {
					position: relative;
					margin-top: 40px;

					.avatar {
						display: flex;
						justify-content: center;
					}

					.mailbox {
						font-family: PingFangSC-Semibold;
						font-size: 14px;
						color: #1F3159;
						letter-spacing: 0;
						font-weight: 600;
						margin-top: 14px;
						display: flex;
						justify-content: center;
					}
				}
			}

			.account-head{
				margin-left: 24px;
				font-family: PingFangSC-Semibold;
				font-size: 18px;
				color: #203259;
				letter-spacing: 0;
				line-height: 24px;
				font-weight: 600;
			}
			.content-right {
				flex: 1;
				// width: 80%;
				/*height: 804px;*/
				min-height: 100%;
				// padding: 5% 5% 5% 5%;
				margin: 16px;
				padding: 64px 55px;
				background: #ffffff;
				border-radius: 2px;
				// box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

				.inform {
					margin: 0 auto;
					margin-top: 58px;
					.informlist {
						display: flex;
						align-items: flex-start;
						line-height: 80px;
						div {
							text-align: left;
						}
						/deep/.ant-input{
							width: 200px;
						}
					}

					.listone {
						color: rgba(31,49,89,0.85);
						font-size: 16px;
						height: 80px;
						font-weight: 400;
						border-bottom: 1px solid rgba(31,49,89,0.15);
						div {
							margin-left: 24px;
							width: 90px;
							text-align: left;
						}
						span{
							font-family: PingFangSC-Semibold;
							font-size: 16px;
							color: #1F3159;
							letter-spacing: 0;
							font-weight: 600;
						}
						.modify {
							color: #2185f0;
							cursor: pointer;
						}
					}

					.right-button{
						margin-top: 24px;
						line-height: 23px;
						width: 89px;
						background: rgba(31, 49, 89, 0.05);
						border: 1px solid rgb(216, 220, 230);
						border-radius: 4px;
						height: 32px;
						margin-left: auto;
						margin-right: 20px;
					}
				}
			}
		}
	}

</style>


<style lang='scss'>
	.ant-form-item {
		margin-bottom: 0;
	}
	.mesinp {
		width: 150px;
		margin: 0;
		position: absolute;
		margin-left: -10px;
		margin-top: -40px;
	}
</style>
